<template>
  <div class="category-sidebar bg-white p-4 rounded-lg shadow-sm">
    <h3 class="text-base font-semibold text-gray-800 mb-3 border-b pb-2">全部分类</h3>
    <ul class="space-y-2 text-sm">
      <li v-for="category in categories" :key="category.name">
        <a href="#" class="flex items-center text-gray-600 hover:text-red-500 py-1">
          <el-icon class="mr-2 text-gray-400"><CollectionTag /></el-icon>
          <span>{{ category.name }}</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { CollectionTag } from '@element-plus/icons-vue'

// Static data based on the target URL's "服装" category sidebar
const categories = [
  { name: '外衣' },
  { name: '卫衣' },
  { name: '裤装' },
  { name: '毛衫' },
  { name: '衬衫' },
  { name: 'T恤' },
  { name: '内衣' },
  { name: '内裤' },
  { name: '丝袜' },
  { name: '家居服' },
  { name: '袜子' },
]
</script>

<style scoped>
/* Add specific styles if needed */
</style> 